<template>
    <div class="cancel-order-page">
        <van-nav-bar title="取消订单" left-text="返回" left-arrow @click-left="$router.back()" />

        <div class="content">
            <div class="title">是否确认取消订单？</div>
            <div class="notice">订单取消后无法恢复</div>

            <div class="reason-title">请选择原因：</div>

            <van-radio-group v-model="selectedReason">
                <van-cell-group>
                    <van-cell v-for="reason in cancelReasons" :key="reason.value" clickable
                        @click="selectedReason = reason.value">
                        <template #title>
                            {{ reason.label }}
                        </template>
                        <template #right-icon>
                            <van-radio :name="reason.value" />
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>

            <!-- 其他原因输入框 -->
            <van-field v-if="selectedReason === '6'" v-model="otherReason" rows="2" autosize type="textarea"
                placeholder="请输入具体原因" show-word-limit maxlength="200" class="reason-input" />

            <div class="button-group">
                <van-button round type="primary" plain class="confirm-btn" @click="handleConfirmCancel">
                    确认取消
                </van-button>

                <van-button round type="default" class="cancel-btn" @click="handleGoBack">
                    不取消了
                </van-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { showToast } from 'vant';
import { updateOrderDescription } from '@/api/index';

const router = useRouter();
const route = useRoute();
const selectedReason = ref('');
const otherReason = ref('');
const orderId = ref(null);


// 添加取消原因数据
const cancelReasons = [
    { value: '1', label: '订单填写错误，需要重新下单' },
    { value: '2', label: '无人报价' },
    { value: '3', label: '师傅报价太高了' },
    { value: '4', label: '通过其他方式找到师傅了' },
    { value: '5', label: '只是想尝试一下' },
    { value: '6', label: '其他原因' }
];

const handleConfirmCancel = () => {
    if (!selectedReason.value) {
        showToast('请选择取消原因');
        return;
    }

    // 如果是其他原因，需要填写具体内容
    if (selectedReason.value === '6' && !otherReason.value.trim()) {
        showToast('请输入具体原因');
        return;
    }

    const cancelReason = selectedReason.value === '6'
        ? `其他原因：${otherReason.value}`
        : getReasonText(selectedReason.value);

    // console.log('取消原因:', cancelReason);
    updateOrderDescription(orderId.value, '已取消', cancelReason)
    showToast('订单已取消');
    router.back();
};

const handleGoBack = () => {
    router.back();
};

// 获取原因对应的文本
const getReasonText = (value) => {
    const reasons = {
        '1': '订单填写错误，需要重新下单',
        '2': '无人报价',
        '3': '师傅报价太高了',
        '4': '通过其他方式找到师傅了',
        '5': '只是想尝试一下',
        '6': '其他原因'
    };
    return reasons[value] || '';
};

// 初始化加载
onMounted(() => {
    orderId.value = route.query.orderId; // 获取参数
    // console.log('接收到的订单ID:', orderId.value);
});

</script>

<style scoped>
.cancel-order-page {
    background-color: #f7f8fa;
    min-height: 100vh;
}

.content {
    padding: 16px;
}

.title {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px;
}

.notice {
    color: #969799;
    text-align: center;
    margin-bottom: 24px;
}

.reason-title {
    font-weight: bold;
    margin: 16px 0 8px;
    padding-left: 16px;
}

.reason-input {
    margin: 12px 0;
    background-color: #fff;
    border-radius: 8px;
}

.button-group {
    margin-top: 32px;
    padding: 0 16px;
}

.confirm-btn {
    margin-bottom: 12px;
}

.van-cell {
    align-items: center;
}

.van-radio {
    display: flex;
    align-items: center;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  gap: 12px; /* 按钮间距 */
  margin-top: 32px;
  padding: 0 16px;
}

/* 不取消了按钮 - 蓝色实心 */
.cancel-btn {
  flex: 1;
  background-color: #238bf3;
  color: white;
  border: none;
  font-size: 16px;
}

/* 确认取消按钮 - 灰色边框 */
.confirm-btn {
  flex: 1;
  background-color: rgb(203, 195, 195);
  color: gray !important;
  border-color: rgb(203, 195, 195, 0.5);
  font-size: 16px;
}
</style>